<template>
	<view>
		<view class="topBox">
			<view :style="{height: (statusBarHeight) + 'px'}"></view>
			<view class="top_Back">
				<image @click="Goback()" src="https://img.wilmer.com.cn/admin/2024/3-31/GoBack.png" mode=""></image>
				<text class="textConter">个人中心</text>
			</view>
		</view>
		<view class="bottom_nav">
			<view class="head">
				<image class="left" src="https://img.wilmer.com.cn/admin/2024/3-31/%E5%9B%BE%E5%B1%82%203%202.png"
					mode=""></image>
				<view class="right">
					<view class="one_text">132****4730</view>
					<view class="two_text">欢迎登录</view>
				</view>
			</view>
			<view class="switch">
				<view class="box" v-for="(item,index) in list" :key="index" :class="{'special' : list_index== index}"
					@click="onclick(index)">
					{{item}}
				</view>
			</view>
			<view class="line"></view>
			<view class="orderList" v-if="list_index == 0">
				<view class="order_nav" v-for="(itme,index) in 5" :key="index">
					<view class="oneLine">订单编号：202403181621000001</view>
					<view class="twoLine">创建时间：2024-03-18 16:21:34</view>
				</view>
			</view>
			<view class="opinion" v-else>
				<u--textarea v-model="value" border='none' placeholder="您的意见是…"></u--textarea>
				<view class="btn">提交</view>
			</view>
			<view :style="{height: safeArea + 'px'}"></view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				statusBarHeight: 0, // 状态栏高度
				navigationBarHeight: 44, // 导航栏高度
				safeArea: 0, // 底部安全距离
				list: ['我的订单', '意见箱'],
				list_index: 0,
				order_list: [],
				value: ""
			}
		},
		onShow() {
			// 获取状态栏高度
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 0;
			// 获取底部安全距离
			let res = uni.getSystemInfoSync();
			this.safeArea = res.screenHeight - res.safeArea.bottom;
		},
		methods: {
			onclick(i) {
				this.list_index = i
			},
			Goback() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: auto;
		background: #F8F8F8;
		overflow-x: hidden;
	}
</style>

<style lang="scss" scoped>
	.topBox {
		width: 100vw;
		height: 480rpx;
		background: url('https://img.wilmer.com.cn/admin/2024/3-31/top_bg.png') no-repeat;
		background-size: 100% 100%;

		.top_Back {
			height: 44px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			image {
				width: 28rpx;
				height: 38rpx;
				position: absolute;
				left: 56rpx;
			}

			.textConter {
				font-family: PingFang SC;
				font-size: 32rpx;
				font-weight: 500;
				color: #fff;
			}
		}
	}

	.bottom_nav {
		width: 688rpx;
		height: calc(682px - 24px);
		padding-top: 24px;
		border-radius: 20px 20px 0px 0px;
		background-color: #fff;
		margin: -250rpx auto 0;

		.head {
			display: flex;

			.left {
				width: 160rpx;
				height: 160rpx;
				margin-left: 20rpx;
				margin-right: 30rpx;
			}

			.right {
				margin-top: 32rpx;
				display: flex;
				flex-direction: column;

				.one_text {
					font-family: PingFang SC;
					font-size: 40rpx;
					font-weight: 500;
					color: #262626;
					line-height: 48rpx;
				}

				.two_text {
					font-family: PingFang SC;
					font-size: 28rpx;
					font-weight: 400;
					color: #BABABA;
					line-height: 34rpx;
					margin-top: 8rpx;
				}
			}
		}

		.switch {
			margin-top: 84rpx;
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			background: url('https://img.wilmer.com.cn/admin/2024/3-31/Vector%203.png') no-repeat;
			background-size: 100% 100%;

			.box {
				font-family: PingFang SC;
				font-size: 32rpx;
				font-weight: 400;
				color: #999999;
			}

			.special {
				color: #319AF5;
			}
		}

		.line {
			width: 100%;
			height: 12rpx;
			background: #F8F8F8;
		}

		.orderList {
			.order_nav {
				height: 130rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				border-bottom: 2rpx solid #F8F8F8;

				.oneLine {
					margin-left: 30rpx;
					font-family: PingFang SC;
					font-size: 32rpx;
					font-weight: 400;
					color: #666666;
					line-height: 38rpx;
				}

				.twoLine {
					margin-left: 30rpx;
					margin-top: 12rpx;
					font-family: PingFang SC;
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					line-height: 30rpx;
				}
			}
		}

		.opinion {
			display: flex;
			flex-direction: column;
			align-items: center;

			.btn {
				width: 204rpx;
				height: 80rpx;
				border-radius: 20px;
				border: 1px solid #E6E6E6;
				line-height: 80rpx;
				font-family: PingFang SC;
				font-size: 32rpx;
				font-weight: 400;
				text-align: center;
				color: #999999;
				margin: 36rpx auto 0;
			}
		}
	}

	::v-deep .u-textarea {
		width: 604rpx;
		margin-top: 52rpx;
		background-color: #F8F8F8 !important;
	}
</style>